Modern Use of Media Queries

#webdev #frontend #style

CSS Magic for easy to use dynamic columns.

.wrapper {
	container-type: inline-size;
}

.columns {
	display: grid;
	gap: 2rem;
}

// 3 is the number *columns*
@container(width > calc(20ch * 3)) {
	.columns {
		grid-template-columns: repeate(3, 1fr);
	}
}

<div class="wrapper">
	<div class="columns">
		<p> ... </p>
		<p> ... </p>
		<p> ... </p>
		<p> ... </p>
		<p> ... </p>
		<p> ... </p>
	</div>
</div>

Credit